<template>
  <div class="login">
    <h1 class="title">登录</h1>

    <div class="content">
      <div :class="[vl.classNmae]" v-for="(vl, i) in inplist" :key="i">
        <div class="text">{{ vl.title }}</div>
        <input type="text" @blur="blur(i, $event)" @focus="fcous" />
      </div>

      <button type="submit" class="btn submit" @click="submit">登录</button>
      <div class="btn register">注册</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inplist: [
        {
          title: "请输入手机号码",
          classNmae: "tel inp",
        },
        {
          title: "请输入密码",
          classNmae: "psw inp",
        },
      ],
      tel: null,
      psw: null,
      UserInfo: null,
    };
  },
  methods: {
    // 获取用户信息数据
    getUserInfoFun() {
      this.UserInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    },
    // 得到焦点添加类名修改样式实现动画
    fcous(e) {
      e.target.parentNode.classList.add("fcous");
    },
    // 失去光标对输入框内容的判断
    blur(i, e) {
      // 获取输入的值
      let value = e.target.value;
      if (value != "") {
        //   手机号正则
        let tel_reg =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

        // 密码正则
        let psw_reg = /[0-9a-zA-Z]{8,16}/;

        // 第一个输入框
        if (i == 0) {
          if (tel_reg.test(value)) {
            this.tel = value;
          } else {
            this.tel = null;
          }
        }

        // 第二个输入框
        if (i == 1) {
          if (psw_reg.test(value)) {
            this.psw = value;
          } else {
            this.psw = null;
          }
        }
      } else {
        e.target.parentNode.classList.remove("fcous");
      }
    },
    // 提交功能
    submit() {
      if (this.tel in this.UserInfo) {
        if (this.UserInfo[this.tel].psw == this.psw) {
          localStorage.setItem("HL_user", this.tel);
          this.$router.push("/My?tel=" + this.tel);
          this.$toast({
            message: "登录成功",
            position: "bottom",
          });
          this.$emit("show");
        } else {
          this.$toast({
            message: "账号密码错误",
            position: "bottom",
          });
        }
      } else {
        this.$toast({
          message: "账号密码错误",
          position: "bottom",
        });
      }
    },
  },
  created() {
    this.$emit("hide");
    this.getUserInfoFun();
  },
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  background-image: linear-gradient(
    25deg,
    #6a85f3 15%,
    #94a9ff 65%,
    #b5c4ff 90%,
    #b0bbf1
  );

  .title {
    padding: 100px 0 20px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
  }

  > .content {
    width: 80%;
    margin: 0 auto;
    padding: 40px 20px 10px;
    box-sizing: border-box;
    // height: 260px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;

    .inp {
      width: 97%;
      margin: 0px auto 30px;
      position: relative;

      &.fcous .text {
        font-size: 12px;
        top: -15px;
        left: 0;
      }

      > .text {
        position: absolute;
        z-index: 0;
        top: 0px;
        left: 5px;
        font-size: 16px;
        color: #333;
        transition: all 0.3s;
      }

      > input {
        position: relative;
        z-index: 10;
        width: 100%;
        padding-left: 10px;
        box-sizing: border-box;
        border: 0;
        background: transparent;
        height: 30px;
        border-bottom: 1px solid #000;
      }
    }

    .btn {
      height: 35px;
      line-height: 35px;
      color: #fff;
      width: 100%;
      border: 0;
      margin-bottom: 15px;
      background: #333;
      text-align: center;
    }
  }
}
</style>